<template>
	<view class="mydetail-body">
		<view class="tn-flex tn-flex-row-center tn-margin-bottom-sm">
			<view class="justify-content-item">
				<text @touchend="getNextDate(-1)">上一天</text>
			</view>
			<view class="justify-content-item tn-flex-1 tn-text-center">
				<text class="tn-padding-right-sm">{{dangqianriqi}}</text><text>{{xingqiji}}</text>
			</view>
			<view class="justify-content-item">
				<text @touchend="getNextDate(1)">下一天</text>
			</view>
		</view>
		<view class="">
			<view class="tn-padding-sm">上午</view>
			<view class="tn-bg-white tn-margin-bottom-sm">
				<view class="row-tb tn-flex tn-flex-row-between">
					<view class="tb-row-cl right-line"> 部门 </view>
					<view class="tb-row-cl right-line"> 总人数/人 </view>
					<view class="tb-row-cl right-line"> 打卡/人 </view>
					<view class="tb-row-cl right-line"> 迟到 </view>
					<view class="tb-row-cl"> 打卡率 </view>
				</view>
				<view class="row-tb tn-flex tn-flex-row-between" v-for="(item, index) in shangwuTable" :key="index">
					<view class="tb-row-cl right-line"> {{item.deptName?item.deptName:0}} </view>
					<view class="tb-row-cl right-line"> {{item.total?item.total:0}} </view>
					<view class="tb-row-cl right-line"> {{item.puncherTotal?item.puncherTotal:0}} </view>
					<view class="tb-row-cl right-line"> {{item.lateOrleaveEarly?item.lateOrleaveEarly:0}} </view>
					<view class="tb-row-cl"> {{item.punchRate?item.punchRate+'%':''}} </view>
				</view>
			</view>
			<view class="row-tb tn-flex tn-flex-row-between zongji-row">
				<view class="tb-row-cl"> 总计 </view>
				<view class="tb-row-cl"> {{shangwuTongji.total?shangwuTongji.total:0}}人 </view>
				<view class="tb-row-cl"> {{shangwuTongji.clockTotal?shangwuTongji.clockTotal:0}}人 </view>
				<view class="tb-row-cl"> {{shangwuTongji.lateTotal?shangwuTongji.lateTotal:0}}人 </view>
				<view class="tb-row-cl"> {{shangwuTongji.punchRate?shangwuTongji.punchRate+'%':''}} </view>
			</view>
		</view>
		<view class="">
			<view class="tn-padding-sm">下午</view>
			<view class="tn-bg-white tn-margin-bottom-sm">
				<view class="row-tb tn-flex tn-flex-row-between">
					<view class="tb-row-cl right-line"> 部门 </view>
					<view class="tb-row-cl right-line"> 总人数/人 </view>
					<view class="tb-row-cl right-line"> 打卡/人 </view>
					<view class="tb-row-cl"> 早退 </view>
					<view class="tb-row-cl"> 打卡率 </view>
				</view>
				<view class="row-tb tn-flex tn-flex-row-between" v-for="(item, index) in xiawuwuTable" :key="index">
					<view class="tb-row-cl right-line"> {{item.deptName?item.deptName:0}} </view>
					<view class="tb-row-cl right-line"> {{item.total?item.total:0}} </view>
					<view class="tb-row-cl right-line"> {{item.puncherTotal?item.puncherTotal:0}} </view>
					<view class="tb-row-cl right-line"> {{item.lateOrleaveEarly?item.lateOrleaveEarly:0}} </view>
					<view class="tb-row-cl"> {{item.punchRate?item.punchRate+'%':''}} </view>
				</view>
			</view>
			
			<view class="row-tb tn-flex tn-flex-row-between zongji-row">
				<view class="tb-row-cl"> 总计 </view>
				<view class="tb-row-cl"> {{xiawuTongji.total?xiawuTongji.total:0}}人 </view>
				<view class="tb-row-cl"> {{xiawuTongji.clockTotal?xiawuTongji.clockTotal:0}}人 </view>
				<view class="tb-row-cl"> {{xiawuTongji.lateTotal?xiawuTongji.lateTotal:0}}人 </view>
				<view class="tb-row-cl"> {{xiawuTongji.punchRate?xiawuTongji.punchRate+'%':''}} </view>
			</view>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				activeName: 1,
				shangwuTable: [],
				shangwuTongji: {},
				xiawuwuTable: [],
				xiawuTongji:{},
				scrollList: [],
				currentTab: 0,
				youerList: [],
				classId: '',
				genders:{
					0: '未知',
					1: '男',
					2: '女'
				},
				xingqiji: '',
				dangqianriqi: '',
			}
		},
		mounted() {
			// this.getbanjiFenlei();
			this.getxingqi(new Date().getDay())
			this.getDay(new Date())
			this.getkaoqinDetail();
		},
		methods: {
			changeActiveTab(index){
				this.activeName = index;
			},
			tabChange(index){
				this.currentTab = index;
			},
			
			getkaoqinDetail(){
				this.request({
					url: '/StaffAttendance/GetMoveStaffAttendanceRecordStatistics',
					method: 'post',
					params: {
						date: this.dangqianriqi
					},
				}).then(res => {
					if(res.code == 200 && res.success){
						this.shangwuTongji = res.data.morning;
						this.shangwuTable = this.shangwuTongji.recordDetails;
						this.xiawuTongji = res.data.night;
						this.xiawuwuTable = this.xiawuTongji.recordDetails;
					}
				})
			},
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.scrollList = res.data;
						if(this.scrollList.length){
							this.classId = this.scrollList[0].id;
							this.getChildrens();
						}
					}
				})
			},
			
			getDay(dd){
				let y = dd.getFullYear();
			　　let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				this.dangqianriqi = y+'-'+m+'-'+d;
			},
			getxingqi(week){
				let str = ''
				if (week == 0) {  
				        str = "星期日";  
				} else if (week == 1) {  
				        str = "星期一";  
				} else if (week == 2) {  
				        str = "星期二";  
				} else if (week == 3) {  
				        str = "星期三";  
				} else if (week == 4) {  
				        str = "星期四";  
				} else if (week == 5) {  
				        str = "星期五";  
				} else if (week == 6) {  
				        str = "星期六";  
				}
				this.xingqiji = str;
			},
			getNextDate(day) { 
				let date = this.dangqianriqi;
			　　var dd = new Date(date);
			　　dd.setDate(dd.getDate() + day);
			　　var y = dd.getFullYear();
			　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
			　　this.dangqianriqi = y + "-" + m + "-" + d;
			
				this.getxingqi(new Date(this.dangqianriqi).getDay())
				this.getkaoqinDetail();
			},
			getChildrens(){
					this.request({
						url: '/Children/MobilePage',
						method: 'get',
						params: {
							pageNo: 1,
							pageSize: 50,
							ClassId: this.classId,
						},
					}).then(res => {
						if(res.code == 200 && res.data){
								let rows = res.data.rows;
								rows.forEach(item => {
									this.youerList.push(item);
								})
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: res.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
					})
			},
			qiandaofunction(){
				
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.mydetail-body{
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
		overflow-y: auto;
		padding: 10px;
	}
	.tab-view-container{
		overflow: hidden;
		
	}
	.qiandao-view{
		background-color: rgba(242, 242, 242, 1);
		padding: 14rpx 40rpx;
	}
	.activeTab{
		background-color: rgba(202, 249, 130, 1);
	}
	.row-tb{
		border-bottom: 1px solid #dddddd;
		.tb-row-cl{
			padding: 10rpx;
			width: 25%;
			text-align: center;
		}
		.right-line{
			border-right: 1px solid #dddddd;
		}
	}
	.zongji-row{
		background-color: rgba(215, 215, 215, 1);
	}
</style>